<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <h1>网站列表</h1>
  <div
    v-for="site in info"
  >
    {{ site.name }}
  </div>
</div>

<script>
const app = {
  data() {
    return {
      info: 'Ajax 测试!!'
    }
  },
  mounted () {
    axios({
            url: "https://www.runoob.com/try/ajax/json_demo.json",               // 请求地址
            method: "get",                   // 请求方法
            headers: {                         // 请求头
              "Content-Type": "application/json",
              "Access-Control-Allow-Origin": "*"
            },
    })
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>
</html>